<template>
    <div class="wl_Header">
        <div class="logo">
            <img src="../assets/img/title.png">
            <div class="wl_name"> Cyber Data Co</div>
        </div>
        <div class="wl_crumbs">
            <Crumbs />
        </div>
        <div class="wl_manage">
            <a-space>
                <div class="wl_title-manage">
                    <SearchOutlined style="color: white" />
                </div>
                <div class="wl_title-manage">
                    <QuestionCircleOutlined style="color: white" />
                </div>
                <div class="wl_title-manage">
                    <a-dropdown :overlayStyle='{"color":"red  !important","min-width": "125px"}'>
                        <a class="ant-dropdown-link" @click.prevent>
                            <a-avatar :size="23" style="background-color: #7faaff;margin-right: 5px">
                                <template #icon><UserOutlined /></template>
                            </a-avatar>Xiao Ming
                        </a>
                        <template #overlay>
                            <a-menu>
                                <a-menu-item key="0">
                                    <UserOutlined />个人中心
                                </a-menu-item>
                                <a-menu-item key="1">
                                    <SettingOutlined />个人设置
                                </a-menu-item>
                                <a-menu-divider />
                                <a-menu-item key="3">
                                    <LogoutOutlined />退出登录
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </div>
            </a-space>

        </div>
    </div>
</template>

<script setup lang="ts">
    import Crumbs from '@/common/Crumbs.vue'
    import { LogoutOutlined,SettingOutlined,UserOutlined,SearchOutlined,QuestionCircleOutlined } from '@ant-design/icons-vue';
    import {defineEmits} from 'vue'
    //子传父
    const emits = defineEmits(['update:modelValue']);
    const inc=()=>{
        emits("update:modelValue",'222');
    }
</script>

<style scoped>
    .wl_Header span{
        height: 100%;
    }
    .wl_crumbs {
        flex: 1 0 6%;
        color: white;
        text-align: left;
        padding: 12px 30px;
    }
    .ant-dropdown-link {
        color: white;
    }
</style>